<template>
    <div>
        <el-row style="display: flex;align-items: center;padding: 10px">
            <el-col :span="ui.spanLabel" class="label">
                <label :title="properties.description">{{keys=='text'?properties.name:keys}}:</label>
            </el-col>
            <el-col :span="ui.spanControl" :offset="ui.offsetControl">
                <el-input size="small"
                          :type="properties.type"
                        :placeholder="properties.placeholder"
                        :disabled="properties.disabled||false"
                        v-model="eValue"
                          @change="changeVal"
                        :clearable="properties.clearable||true">
                </el-input>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "e-input",
        props:{
            properties:{
                /*type:{  //可选值：text，textarea 和其他 原生 input 的 type 值
                    type:String,
                    default:'number'
                },
                placeholder:{
                    type:String,
                    default:''
                },
                disabled:{  //禁用
                    type:Boolean,
                    default:false
                },
                clearable:{  //是否可清空
                    type:Boolean,
                    default:true
                },
                size:{   //输入框尺寸，只在 type!="textarea" 时有效; 可选值：medium / small / mini
                    type:String,
                    default:'small'
                },
                rows:{  //输入框行数，只对 type="textarea" 有效
                    type:Number,
                    default:2
                },
                readonly:{
                    type:Boolean,
                    default:false
                },*/
                type:Object
            },
            keys:{
              type:String
            },
            /*"ui":{
                "spanLabel":6,
                "spanControl":18,
                "offsetControl":0
            }*/
            ui:{  //ui配置
                type:Object
            }

        },
        data() {
            return {
                eValue: ''
            }
        },
        mounted(){
            let that = this;
            this.$bus.$on('activeNode',function (e) {   //监听选中节点改变时当前表单初始值改变
                that.eValue = e[that.keys];
            })
        },
        methods:{
            changeVal(val){  //当前表单输入值改变通知父组件更新画布节点数据
                this.$emit('changeAttr',{[this.keys]:val});
            }
        }
    }
</script>

<style scoped>
    .label{
        text-align: right;
        padding-right: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>